import { Metadata } from "next"
import Link from "next/link"
import { Separator } from "@/components/ui/separator"
import { SidebarNav } from "@/components/layout/sidebar-nav"
import { formatDate } from "@/lib/utils"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import { ArrowLeft, Clock, AlertTriangle, CheckCircle, XCircle, AlertCircle, Calendar, CalendarDays } from "lucide-react"
import { RfqsLastView } from "@/db/schema"
import { findRfqLastById } from "@/lib/rfq-last/service"
import { differenceInDays } from "date-fns"
import { Alert, AlertTitle, AlertDescription } from "@/components/ui/alert"
import { DueDateEditButton } from "@/lib/rfq-last/due-date-edit-button"

export const metadata: Metadata = {
  title: "견적 목록 상세",
}

export default async function RfqLayout({
  children,
  params,
}: {
  children: React.ReactNode
  params: { lng: string, id: string }
}) {

  // 1) URL 파라미터에서 id 추출, Number로 변환
  const resolvedParams = await params
  const lng = resolvedParams.lng
  const rfqId = parseInt(resolvedParams.id, 10);

  if (!rfqId || isNaN(rfqId) || rfqId <= 0) {
    return (
      <div className="p-4">
        <Alert variant="destructive">
          <AlertCircle className="h-4 w-4" />
          <AlertTitle>오류</AlertTitle>
          <AlertDescription>
            유효하지 않은 RFQ입니다.
          </AlertDescription>
        </Alert>
      </div>
    );
  }


  // 2) DB에서 해당 협력업체 정보 조회
  const rfq: RfqsLastView | null = await findRfqLastById(rfqId)

  // 3) 사이드바 메뉴
  const sidebarNavItems = [
    {
      title: "견적 문서관리",
      href: `/${lng}/evcp/rfq-last/${rfqId}`,
    },
    {
      title: "RFQ 발송",
      href: `/${lng}/evcp/rfq-last/${rfqId}/vendor`,
    },
  ]

  // Due Date 상태 계산 함수
  const getDueDateStatus = (dueDate: Date | string | null) => {
    if (!dueDate) return null;

    const now = new Date();
    const due = new Date(dueDate);
    const daysLeft = differenceInDays(due, now);

    if (daysLeft < 0) {
      return {
        icon: <XCircle className="h-4 w-4" />,
        text: `${Math.abs(daysLeft)}일 지남`,
        className: "text-red-600",
        bgClassName: "bg-red-50"
      };
    } else if (daysLeft === 0) {
      return {
        icon: <AlertTriangle className="h-4 w-4" />,
        text: "오늘 마감",
        className: "text-orange-600",
        bgClassName: "bg-orange-50"
      };
    } else if (daysLeft <= 3) {
      return {
        icon: <AlertCircle className="h-4 w-4" />,
        text: `${daysLeft}일 남음`,
        className: "text-amber-600",
        bgClassName: "bg-amber-50"
      };
    } else if (daysLeft <= 7) {
      return {
        icon: <Clock className="h-4 w-4" />,
        text: `${daysLeft}일 남음`,
        className: "text-blue-600",
        bgClassName: "bg-blue-50"
      };
    } else {
      return {
        icon: <CheckCircle className="h-4 w-4" />,
        text: `${daysLeft}일 남음`,
        className: "text-green-600",
        bgClassName: "bg-green-50"
      };
    }
  };

  const dueDateStatus = rfq?.dueDate ? getDueDateStatus(rfq.dueDate) : null;

  const getRfqCategory = (rfqCode: string | null | undefined): string => {
    if (!rfqCode || rfqCode.length === 0) return 'itb'; // 기본값

    const firstChar = rfqCode[0].toUpperCase();
    switch (firstChar) {
      case 'I':
        return 'itb';
      case 'R':
        return 'rfq';
      case 'F':
        return 'general';
      default:
        return 'itb'; // 기본값
    }
  };

  return (
    <>
      <div className="container py-6">
        <section className="overflow-hidden rounded-[0.5rem] border bg-background shadow">
          <div className="hidden space-y-6 p-10 pb-16 md:block">
            <div className="space-y-0.5">
              {/* 제목과 버튼을 같은 라인에 배치 */}
              <div className="flex items-center justify-between">
                <h2 className="text-2xl font-bold tracking-tight">
                  {rfq
                    ? rfq.rfqTitle
                      ? `견적 상세 관리 ${rfq.rfqCode ?? ""} | ${rfq.rfqTitle}`
                      : `견적 상세 관리 ${rfq.rfqCode ?? ""}`
                    : "Loading RFQ..."}
                </h2>
                <Link href={`/${lng}/evcp/rfq-last?rfqCategory=${getRfqCategory(rfq?.rfqCode)}`} passHref>
                  <Button variant="ghost" className="flex items-center text-primary hover:text-primary/80 transition-colors">
                    <ArrowLeft className="mr-1 h-4 w-4" />
                    <span>견적 목록으로 돌아가기</span>
                  </Button>
                </Link>
              </div>

              {/* 생성일과 마감일 표시 */}
              {rfq && (
                <div className="flex items-center gap-6 pt-3">
                  {/* 생성일 */}
                  <div className="flex items-center gap-2">
                    <Calendar className="h-4 w-4 text-muted-foreground" />
                    <span className="text-sm font-medium text-muted-foreground">생성일:</span>
                    <strong className="text-sm">{formatDate(rfq.createdAt, "KR")}</strong>
                  </div>

                  {/* 구분선 */}
                  <div className="h-4 w-px bg-border" />

                  {/* 마감일 */}
                  <div className="flex items-center gap-2">
                    <CalendarDays className="h-4 w-4 text-muted-foreground" />
                    <span className="text-sm font-medium text-muted-foreground">마감일:</span>
                    {rfq.dueDate ? (
                      <>
                        <strong className="text-sm">{formatDate(rfq.dueDate, "KR")}</strong>
                        {dueDateStatus && (
                          <div className={`flex items-center gap-1.5 px-2.5 py-1 rounded-full ${dueDateStatus.bgClassName} ${dueDateStatus.className}`}>
                            {dueDateStatus.icon}
                            <span className="text-xs font-medium">{dueDateStatus.text}</span>
                          </div>
                        )}
                        <DueDateEditButton
                          rfqId={rfqId}
                          currentDueDate={rfq.dueDate}
                          rfqCode={rfq.rfqCode || ''}
                          rfqTitle={rfq.rfqTitle || ''}
                        />
                      </>
                    ) : (
                      <>
                        <span className="text-sm text-muted-foreground">미설정</span>
                        <DueDateEditButton
                          rfqId={rfqId}
                          currentDueDate={null}
                          rfqCode={rfq.rfqCode || ''}
                          rfqTitle={rfq.rfqTitle || ''}
                        />
                      </>
                    )}
                  </div>
                </div>
              )}
            </div>
            <Separator className="my-6" />
            <div className="flex flex-col space-y-8 lg:flex-row lg:space-x-12 lg:space-y-0">
              <aside className="lg:w-64 flex-shrink-0">
                <SidebarNav items={sidebarNavItems} />
              </aside>
              <div className="lg:w-[calc(100%-16rem)] overflow-auto">{children}</div>
            </div>
          </div>
        </section>
      </div>
    </>
  )
}